<template>
  <div class="docker">
    <div
      v-for="(item, index) in dockerList"
      :class="{
        docker__item: true,
        'docker__item--active': index === currentIndex,
      }"
      :key="index"
    >
      <router-link :to="item.to">
        <div class="iconfont iconfont1" v-html="item.icon"></div>
        <span class="docker__title">{{ item.text }}</span>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: "Docker",
  props: ["currentIndex"],
  setup() {
    const dockerList = [
      { icon: "&#xe9ce;", text: "首页", to: { name: "Home" } },
      { icon: "&#xe60a;", text: "购物车", to: { name: "CartList" } },
      { icon: "&#xe61e;", text: "订单", to: { name: "OrderList" } },
      { icon: "&#xe660;", text: "我的", to: { name: "MyInfo" } },
    ];
    return { dockerList };
  },
};
</script>
<style lang="scss" scoped>
@import "../style/mixins.scss";
@import "../style/viriables.scss";
.docker {
  display: flex;
  box-sizing: border-box;
  padding: 0 0.18rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.49rem;
  font-weight: 400;
  border-top: 0.01rem solid $content-bgcolor;
  .docker__item {
    flex: 1;
    text-align: center;
    a {
      text-decoration: none;
      color: $content-fontcolor;
    }
  }
  .iconfont1 {
    font-size: 0.2rem !important;
    margin: 0.07rem 0 0.02rem 0;
  }
  .docker__title {
    font-size: 0.1rem;
  }
  .docker__item--active {
    a {
      color: #1fa4fc;
    }
  }
}
</style>
